<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 案例要求：购物车数量增减功能：
		 具体要求如下：
		 在购物车中默认商品数量为1，当点击左侧-按钮时，购物车数量递减
		 当点击右侧+按钮时，购物车数量递增
		 当商品数量为1时，商品数量不能继续减少
		 当商品数量为10时，商品数量不能继续增加
		 -->
		 <div id="app">
			 <button @click="sub()">-</button>
			 {{num}}
			 <button @click="add()">+</button>
		 </div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				num:1
			},
			methods:{
				sub:function(){
					if(this.num>1){
						this.num--
					}else{
						alert("商品数量最少为1")
					}
									
				},
				add:function(){
					if(this.num<10){
						this.num++
					}else{
						alert("商品限购10个")
					}
				}
			}
		})
	
	</script>
	
</html>
